<template>
  <div class="page-container-padding">
    <div class="query-box">
      <span>
        <el-input
          v-model="keyword"
          size="mini"
          placeholder="名称关键字或平台ID查询"
          @change="toQueryDataIndex"
        >
          <template slot="append">
            <el-button type="primary" size="mini" @click="toQueryDataIndex">
              查询
            </el-button>
          </template>
        </el-input>
      </span>
    </div>
    <el-table border stripe size="mini" :data="dataList">
      <el-table-column label="详细" type="expand" width="70">
        <template #default="scope">
          <div class="expand-box">
            <el-row>
              <el-col :span="2">创建日期</el-col>
              <el-col :span="6">{{ scope.row.create_time }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">更新日期</el-col>
              <el-col :span="6">{{ scope.row.update_time }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">频率</el-col>
              <el-col :span="6">{{ scope.row.frequency }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">来源</el-col>
              <el-col :span="6">
                {{ scope.row.source }} ({{ scope.row.plat }})
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="2">备注</el-col>
              <el-col :span="6">{{ scope.row.note }}</el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="名称" show-overflow-tooltip>
        <template #default="scope">
          <div class="row-name">
            <span>{{ scope.row.name }}</span>
            <span class="mag-btn">
              <el-button type="text" @click="toManageDetail(scope.row)">
                数据管理
              </el-button>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="end_value"
        label="最新值"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="unit"
        label="单位"
        width="80"
        show-overflow-tooltip
      />
      <el-table-column prop="plat_id" label="平台ID" width="140" />
      <el-table-column prop="db_name" label="数据库名" width="110" />
      <el-table-column
        prop="tb_name"
        label="数据表名"
        width="180"
        align="right"
      />
      <el-table-column prop="start_date" label="开始日期" width="95" />
      <el-table-column prop="end_date" label="结束日期" width="95" />
      <el-table-column label="状态" width="110" align="center">
        <template #default="scope">
          <el-tag size="mini" :type="scope.row.stateType">
            {{ scope.row.stateTag }}
          </el-tag>
          <el-tag size="mini" :type="scope.row.activeType">
            {{ scope.row.activeTag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60" align="center">
        <template #default="scope">
          <el-button type="text" @click="toUpdateIndex(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 12px">
      <el-pagination
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="currentRow.showEdit" :title="currentRow.title">
      <el-form size="mini" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="currentRow.name"></el-input>
        </el-form-item>
        <el-form-item label="数据频率">
          <el-select
            v-model="currentRow.frequency"
            placeholder="选择数据指标的频率"
            style="width: 100%"
          >
            <el-option value="日" label="日" />
            <el-option value="周" label="周" />
            <el-option value="月" label="月" />
            <el-option value="季" label="季" />
            <el-option value="年" label="年" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据单位">
          <el-input
            v-model="currentRow.unit"
            placeholder="数据指标的单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="currentRow.start_date"
            placeholder="数据指标的开始日期,可输入YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="来源">
          <el-input
            v-model="currentRow.source"
            placeholder="数据来源"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="currentRow.note"
            placeholder="备注"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态1">
          <el-switch
            v-model="currentRow.state"
            active-text="正常"
            inactive-text="停更"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="状态2">
          <el-switch
            v-model="currentRow.is_active"
            active-text="公开"
            inactive-text="隐蔽"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="currentRow.showEdit = false">取消</el-button>
        <el-button
          type="primary"
          :loading="currentRow.saveLoading"
          @click="toSaveUpdateRow"
        >
          确定保存
        </el-button>
      </div>
    </el-dialog>
    <!-- 具体数据弹窗 -->
    <el-dialog :visible.sync="detailData.isShow">
      <div slot="title">
        <div style="display: flex; align-items: center; line-height: 28px">
          <div>{{ detailData.title }}</div>
          <div
            v-show="curDetailRow.showEdit"
            style="display: flex; align-items: center"
          >
            <div style="margin-left: 16px">
              ID=
              <span style="color: #f44747; font-weight: 600">
                {{ curDetailRow.rowId }}
              </span>
            </div>
            <div style="margin-left: 8px">
              <el-input v-model="curDetailRow.datadate" size="mini" />
            </div>
            <div style="margin-left: 8px">
              <el-input v-model="curDetailRow.datavalue" size="mini" />
            </div>
            <div style="margin-left: 8px">
              <el-switch
                v-model="curDetailRow.is_active"
                active-text="公开"
                inactive-text="隐蔽"
                size="mini"
              />
            </div>
            <el-divider direction="vertical"></el-divider>
            <div style="margin-left: 8px">
              <el-button size="mini" @click="curDetailRow.showEdit = false">
                取消
              </el-button>
              <el-button
                type="primary"
                size="mini"
                :loading="curDetailRow.saveLoading"
                @click="toSaveDetailRow"
              >
                保存
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 0 20px">
        <el-table border stripe :data="detailData.dataList" height="450">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="datadate" label="日期" />
          <el-table-column prop="datavalue" label="数据" />
          <el-table-column label="状态" width="80">
            <template #default="scope">
              <el-tag
                size="mini"
                :type="scope.row.is_active ? 'success' : 'danger'"
              >
                {{ scope.row.is_active ? '公开' : '隐蔽' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template #default="scope">
              <el-button type="text" @click="toEditDetailRow(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <div style="display: flex; align-items: center">
          <el-input
            v-model="newDetailRow.datadate"
            size="mini"
            style="width: 130px"
            placeholder="YYYY-MM-DD"
          ></el-input>
          <el-input
            v-model="newDetailRow.datavalue"
            size="mini"
            style="margin-left: 8px; width: 100px"
            placeholder="0.0"
          ></el-input>
          <el-button
            size="mini"
            type="primary"
            style="margin-left: 8px"
            :loading="newDetailRow.saveLoading"
            @click="toSaveNewDetailRow"
          >
            新增
          </el-button>
          <el-button
            size="mini"
            type="danger"
            style="margin-left: 8px"
            :loading="detailData.deleteLoading"
            @click="toDeleteDetailRows"
          >
            清空
          </el-button>
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            style="margin-left: auto"
            :current-page="detailData.page"
            :page-size="detailData.pageSize"
            :total="detailData.totalCount"
            @current-change="detailDataPageChanged"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    RetrieveIndex,
    UpdateIndex,
    IndexDetailData,
    UpdateIndexDetail,
    CreateIndexDetail,
    DeleteIndexTable,
  } from '@/api/adminRuizhi/dataindexlib'
  export default {
    data() {
      return {
        page: 1,
        pageSize: 100,
        totalCount: 0,
        keyword: '',
        dataList: [],
        currentRow: {
          index_id: null,
          showEdit: false,
          title: '',
          name: '',
          frequency: '',
          unit: '',
          start_date: '',
          source: '',
          note: '',
          state: null,
          is_active: null,
          saveLoading: false,
        },
        detailData: {
          indexId: -1,
          isShow: false,
          title: '',
          deleteLoading: false,
          page: 1,
          pageSize: 50,
          totalCount: 0,
          dataList: [],
        },
        curDetailRow: {
          showEdit: false,
          rowId: -1,
          datadate: '',
          datavalue: '',
          saveLoaing: false,
          is_active: null,
        },
        newDetailRow: {
          datadate: '',
          datavalue: '',
          saveLoading: false,
        },
      }
    },
    mounted() {
      this.getDataIndex()
    },
    methods: {
      toQueryDataIndex() {
        this.page = 1
        this.getDataIndex()
      },

      getDataIndex() {
        RetrieveIndex(this.keyword, this.page, this.pageSize).then((res) => {
          const stateTags = { 1: '正常', 0: '停更' }
          const stateTypes = { 1: 'success', 0: 'danger' }
          const activeTags = { true: '公开', false: '隐蔽' }
          const activeTypes = { true: 'success', false: 'danger' }
          const resData = res.data
          this.dataList = resData.data.rows.map((item) => {
            item.stateTag = stateTags[item.state]
            item.stateType = stateTypes[item.state]
            item.activeTag = activeTags[item.is_active]
            item.activeType = activeTypes[item.is_active]
            return item
          })
          this.totalCount = resData.data.total_count
        })
      },

      currentPageChanged(page) {
        this.page = page
        this.getDataIndex()
      },

      toUpdateIndex(row) {
        this.currentRow.index_id = row.id
        this.currentRow.title = row.name + row.plat_id
        this.currentRow.name = row.name
        this.currentRow.frequency = row.frequency
        this.currentRow.unit = row.unit
        this.currentRow.source = row.source
        this.currentRow.note = row.note
        this.currentRow.start_date = new Date(row.start_date)
        this.currentRow.state = row.state
        this.currentRow.is_active = row.is_active
        this.currentRow.showEdit = true
      },

      toSaveUpdateRow() {
        const bodyData = { ...this.currentRow }
        bodyData.start_date = datetimeToStr(
          this.currentRow.start_date,
          true,
          '-'
        )
        this.currentRow.saveLoading = true
        UpdateIndex(bodyData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.currentRow.index_id = null
          this.currentRow.showEdit = false
          this.currentRow.saveLoading = false
          this.getDataIndex()
        })
      },

      // 删除整个表
      toDeleteDetailRows() {
        this.$baseConfirm('确定清空数据指标吗?操作不可恢复!', '警告', () => {
          this.detailData.deleteLoading = true
          DeleteIndexTable(this.detailData.indexId).then((res) => {
            this.$baseMessage(res.message, 'success')
            this.getIndexDetailData()
            this.detailData.deleteLoading = false
          })
        })
      },

      // 准备管理具体数据
      toManageDetail(row) {
        this.detailData.indexId = row.id
        this.detailData.title = row.name
        this.getIndexDetailData()
        this.detailData.isShow = true
      },

      // 获取详细数据
      getIndexDetailData() {
        IndexDetailData(
          this.detailData.indexId,
          this.detailData.page,
          this.detailData.pageSize
        ).then((res) => {
          const resData = res.data
          this.detailData.dataList = resData.rows
          this.detailData.totalCount = resData.total_count
        })
      },

      detailDataPageChanged(page) {
        this.detailData.page = page
        this.getIndexDetailData()
      },

      // 点击行编辑
      toEditDetailRow(row) {
        this.curDetailRow.rowId = row.id
        this.curDetailRow.datadate = row.datadate
        this.curDetailRow.datavalue = row.datavalue
        this.curDetailRow.is_active = row.is_active
        this.curDetailRow.showEdit = true
      },

      // 保存行数据
      toSaveDetailRow() {
        const bodyData = {
          rid: this.curDetailRow.rowId,
          datadate: this.curDetailRow.datadate,
          datavalue: this.curDetailRow.datavalue,
          is_active: this.curDetailRow.is_active,
        }
        UpdateIndexDetail(this.detailData.indexId, [bodyData]).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.curDetailRow.showEdit = false
          this.curDetailRow.rowId = -1
          this.getIndexDetailData()
        })
      },

      // 新增数据行
      toSaveNewDetailRow() {
        const bodyData = {
          datadate: this.newDetailRow.datadate,
          datavalue: this.newDetailRow.datavalue,
        }
        this.newDetailRow.saveLoading = true
        CreateIndexDetail(this.detailData.indexId, [bodyData])
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.newDetailRow.datadate = ''
            this.newDetailRow.datavalue = ''
            this.detailData.page = 1
            this.getIndexDetailData()
            this.newDetailRow.saveLoading = false
          })
          .catch(() => {
            this.newDetailRow.saveLoading = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .expand-box {
    font-size: 14px;
    margin-left: 70px;
    line-height: 24px;
  }
  .query-box {
    margin-bottom: 12px;
  }
  .row-name {
    .mag-btn {
      float: right;
      opacity: 0;
    }
    &:hover {
      .mag-btn {
        opacity: 1;
      }
    }
  }
</style>
